<!DOCTYPE html>
<html lang="en"
      xmlns:th="https://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="renderer" content="webkit">
    <meta name="google" content="notranslate">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文件管理</title>
</head>
<script type="text/javascript" th:src="@{/assets/js/file/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/file/upstep.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/file/default.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/file/scrollbar.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/file/menu.css}">
<style type="text/css" th:inline="text">
    html, body {
        min-width: 320px;
        /*        cursor: url("[[@{/assets}]]/img/file/mouse.cur"),
                url("[[@{/assets}]]/img/file/mouse.ico"),
                url("[[@{/assets}]]/img/file/mouse.png"),auto;*/
    }
    body{
        background:	#DFE7EF;
    }
    /* 超小屏幕（手机，小于 768px） */
    /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
    @media (max-width: 768px) {
        .head {
            height: 80px;
        }

        .head_l {
            height: 40px;
            float: none;
        }

        .head_r {
            position: relative;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            top: 1px;
            float: none;
        }

        .dialog {
            width: 300px;
            height: 100px;
            margin-left: -150px; /* 宽度的一半 */
        }

    }

    /* 小屏幕（平板，大于等于 768px） */
    @media (min-width: 768px) {
        .head {
            height: 40px;
        }

        .head_l {
            height: 40px;
            float: left;
        }

        .head_r {

            float: left;
        }

        .dialog {
            width: 400px;
            height: 150px;
            margin-left: -200px; /* 宽度的一半 */
        }

    }

    /* 中等屏幕（桌面显示器，大于等于 992px） */
    @media (min-width: 992px) {
        .head {
            height: 40px;
        }

        .head_l {
            height: 40px;
            float: left;
        }

        .head_r {

            float: left;
        }

        .dialog {
            width: 400px;
            height: 150px;
            margin-left: -200px; /* 宽度的一半 */
        }

    }

    /* 大屏幕（大桌面显示器，大于等于 1200px） */
    @media (min-width: 1200px) {
        .head {
            height: 40px;
        }

        .head_l {
            height: 40px;
            float: left;
        }

        .head_r {

            float: left;
        }

        .dialog {
            width: 500px;
            height: 290px;
            margin-left: -250px; /* 宽度的一半 */
        }

    }

    .mengban {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        z-index: 99999;
        display: none;

    }

    .btnGroup {
        height: 100%;
    }

    .btnOne {
        width: 40px;
        height: 40px;
        line-height: 100%;
        float: left;
        margin-right: 10px;
    }

    .head_r {
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
    }

    .path_ul {
        width: auto;
    }

    .path_one {
        float: left;

    }

    .path_one a {
        font-size: 16px;
    }

    .path_one:after {
        position: relative;
        display: inline-block;
        top: 3px;
        width: 20px;
        height: 20px;
        content: '';
        background-repeat: no-repeat;
        background-image: url("[[@{/assets}]]/img/file/point_right.png");
        background-size: 20px;
        background-position: center 2px;

    }

    .back {
        border-radius: 8px;
        background-color: #203E60;
        background-repeat: no-repeat;
        background-image: url("[[@{/assets}]]/img/file/back.png");
        background-size: 30px;
        background-position: center 8px;
    }

    .go {
        border-radius: 8px;
        background-color: #203E60;
        background-repeat: no-repeat;
        background-image: url("[[@{/assets}]]/img/file/前进.png");
        background-size: 30px;
        background-position: center 8px;
    }

    .home {
        border-radius: 8px;
        background-color: #203E60;
        background-repeat: no-repeat;
        background-image: url("[[@{/assets}]]/img/file/home.png");
        background-size: 25px;
        background-position: center;
    }

    .btnOne:hover {
        background-color: #2F3C4F;
        -moz-box-shadow: 5px 5px 5px #888888; /* 老的 Firefox */
        box-shadow: 5px 5px 5px #888888;
    }

    .btnOne:active {
        position: relative;
        /* margin-top: 1px; */
        left: 1px;
        top: 1px;
    }

    .path_logo {
        float: left;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background-repeat: no-repeat;
        background-image: url("[[@{/assets}]]/img/file/路径导航.png");
        background-size: 20px;
        background-position: center 10px;
        margin: 0;
    }

    .content {
        position: relative;
        margin: 0 auto;
        border-radius: 10px;
        -moz-box-shadow: 0 0 7px 5px #A8E4B1; /* 老的 Firefox */
        box-shadow: 0 0 7px 5px #A8E4B1;
        width: 100%;
        height: 370px;
        overflow-y: auto;
    }

    .c_body {
        margin: 0px 5px 10px 5px;
        padding-top: 0.625rem;
        display: flex;
        flex-direction:row;
        flex-wrap:wrap-reverse;
        align-items:flex-end;
    }
    .dir, .file, .details {
        margin: 10px 10px 10px 10px;
        width: 122px;
        height: auto;
    }
    .dir:hover, .file:hover {
        background-color: #118DEF;
        border-radius: 8px;
        color: #FFFFFF;
    }

    .dir_file_active {
        background-color: #118DEF;
        border-radius: 8px;
        color: #FFFFFF;
    }

    .name {
        font-size: 1rem;
        bottom: 0px;
        margin: 0px auto;
        width: 100%;
        color:#0b0b0b;
        font-weight: 400;
        height: auto;
        padding-top: 8px;
        padding-bottom: 5px;
        /*自适应父标签的垂直居中*/
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: -o-box;
        -o-box-orient: horizontal;
        -o-box-pack: center;
        -o-box-align: center;

        display: -ms-box;
        -ms-box-orient: horizontal;
        -ms-box-pack: center;
        -ms-box-align: center;

        display: box;
        box-orient: horizontal;
        box-pack: center;
        box-align: center;

    }

    .name:hover {
        cursor: default;
    }

    .dir_img {
        margin-top: 5px;
        height: 90px;
        width: 100%;
        background-image: url("[[@{/assets}]]/img/file/dir.png");
        border-radius: 8px;
        background-repeat: no-repeat;
        background-size: 90px;
        background-position: center;
    }

    .file_style {
        margin-top: 5px;
        height: 90px;
        width: 100%;
        border-radius: 8px;
        background-repeat: no-repeat;
        background-size: 90px;
        background-position: center;
    }


    /*文件的css，url*/
    .other_file {
        background-image: url("[[@{/assets}]]/img/file/file.png");
    }

    .xlsx {

        background-image: url("[[@{/assets}]]/img/file/xls.png");
    }

    .png {

        background-image: url("[[@{/assets}]]/img/file/png.png");

    }

    .pdf {
        background-image: url("[[@{/assets}]]/img/file/pdf.png");
    }

    .apk {

        background-image: url("[[@{/assets}]]/img/file/apk.png");

    }

    .zip {

        background-image: url("[[@{/assets}]]/img/file/zip.png");

    }

    .mp4 {
        background-image: url("[[@{/assets}]]/img/file/视频.png");
    }

    .md {
        background-image: url("[[@{/assets}]]/img/file/markdown.png");
    }

    .exe {
        background-image: url("[[@{/assets}]]/img/file/exe.png");
    }

    .java {
        background-image: url("[[@{/assets}]]/img/file/java.png");
    }

    .txt {
        background-image: url("[[@{/assets}]]/img/file/txt.png");
    }

    .foot {
        margin-top: 10px;
        width: 100%;
        height: 200px;

    }

    .info_details {

        height: 160px;
        margin-right: 5px;
        margin-left: 5px;

    }

    .centre {
        position: relative;
        text-align: center;
        /*自适应父标签的垂直居中*/
        display: -webkit-box;
        -webkit-box-orient: horizontal;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: horizontal;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: -o-box;
        -o-box-orient: horizontal;
        -o-box-pack: center;
        -o-box-align: center;

        display: -ms-box;
        -ms-box-orient: horizontal;
        -ms-box-pack: center;
        -ms-box-align: center;

        display: box;
        box-orient: horizontal;
        box-pack: center;
        box-align: center;
    }

    .dialog {
        position: fixed;
        background-color: #FFFFFF;
        border-radius: 10px;
        left: 50%;
        top: 18.75rem;
        z-index: 9999999;
        padding: 10px;
        box-shadow: #999999 0px 0px 20px;
    }

    /*弹出新建文件夹框*/
    .addDir {
        display: none;
        position: absolute;
        background-color: #FFFFFF;
        left: 50%;
        top: 18.75rem;
        width: 200px;
        height: 80px;
        z-index: 9999999;
        box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 50px 0px;
    }

    .addDir_head {
        width: 100%;
        height: 30px;
        background-color: #F8F8F8;

    }

    .addDir_body {
        width: 100%;
        height: 30px;
    }

    .addDir_body input {
        background: none;
        outline: none;
        border: none;
        width: calc(100% - 28px);
        margin-left: 14px;
        margin-right: 14px;
        height: 26px;
        display: inline-block;
        font-size: 14px;
    }

    .addDir_foot {
        width: 100%;
        height: 20px;
        float: left;
        display: flex;
    }

    .addDir_foot div {
        text-align: center;
        width: 48%;
        height: 100%;
        display: inline-block;
        font-size: 1rem;
    }

    .addDir_foot div:hover {
        cursor: pointer;
        background-color: #F8F8F8;
    }

    .addFile {
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;
        height: 100px;
        border: 1px dashed #4F6072;
        background-image: url("[[@{/assets}]]/img/file/加号.png");
        background-repeat: no-repeat;
        background-size: 20px;
        background-position: center;
        float: left;
    }

    .addFile:hover {
        cursor: pointer;
        border: 1px dashed #1296DB;
        background-image: url("[[@{/assets}]]/img/file/加号2.png");
    }

    .removeBackImg {
        background-image: none !important;;
    }

    @keyframes turn {
        0% {
            -webkit-transform: rotate(0deg);
        }
        25% {
            -webkit-transform: rotate(90deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        75% {
            -webkit-transform: rotate(270deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }
    }

    .close_icon {
        width: 20px;
        height: 20px;
        position: absolute;
        border-radius: 10px;
        right: -10px;
        top: -10px;
        background-image: url("[[@{/assets}]]/img/file/close.png");
        background-size: 20px;
        z-index: 99999999;
        background-repeat: no-repeat;
    }

    .close_icon:hover {
        background-image: url("[[@{/assets}]]/img/file/close2.png");
    }

    .dialog_head {
        width: 100%;
        height: 45px;
        border-bottom: 1px solid #101010;
        background-color: #449187;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        border-radius: 10px 10px 0 0;
    }

    .dialog_body {
        height: 232px;
        width: 100%;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%);
    }

    .dialog_foot {
        width: 80%;
        height: 35px;
        background-color: #84AF9B;
        position: absolute;
        bottom: -35px;
        left: 50%;
        transform: translate(-50%);
        border-radius: 0 0 17px 17px;

    }

    .dialog_foot input {
        width: 100%;
        height: 100%;
        border-radius: 0 0 15px 15px;
        border: none;
        outline: none;
        background-color: #84AF9B;
        color: #222222;
    }

    .dialog_foot:hover input {
        animation: myfirst 0.8s;
        cursor: pointer;
        color: #FFFFFF;
        background-color: #6190E8;
    }

    @keyframes myfirst {
        0% {
            background: #84AF9B;


        }
        50% {
            background: #43c6ac;

        }
        100% {
            background: #6190E8;

        }
    }

    @-moz-keyframes myfirst /* Firefox */
    {
        from {
            background: red;
        }
        to {
            background: yellow;
        }
    }

    @-webkit-keyframes myfirst /* Safari 和 Chrome */
    {
        from {
            background: red;
        }
        to {
            background: yellow;
        }
    }

    @-o-keyframes myfirst /* Opera */
    {
        from {
            background: red;
        }
        to {
            background: yellow;
        }
    }
</style>

<body class="scro2">
<div class="container-fluid" style="background:#DFE7EF;">
    <div id="mengban" class="mengban" style=""></div>
    <div class="card" style="marigin:10px 0px 10px 0px;background:#DFE7EF;" id="file_body">
        <div id="head" class="head">
            <div id="head_l" class="head_l">
                <ul class="btnGroup">
                    <li class="btnOne back" style="font-size: 13px;" id="back"></li>
                    <li class="btnOne go" style="font-size: 13px;" id="go"></li>
                    <li class="btnOne home" style="font-size: 13px;" id="home"></li>
                </ul>
            </div>
            <div id="head_r" class="head_r">
                <ul class="path_ul">
                    <li class="path_logo"></li>
                    <li th:each="pathStr,stat:${paths}" class="path_one" style="width: auto;">
                        <a href="#">[[${pathStr}]]</a>
                    </li>
                    <!-- <li class="path_one" style="width: auto;"><a href="#">根目录</a></li>
                     <li class="path_one" style="width: auto;"><a href="#">文件夹一</a></li>
                     <li class="path_one" style="width: auto;"><a href="#">文件夹二</a>	</li>-->
                </ul>
            </div>
        </div>
        <hr style="height: 1px; background-color: #F8E8B4;">
        <div th:if="${errorMsg} != null"><p th:utext="${errorMsg}"></p></div>
        <div id="content" class="content" th:if="${root} != null">
            <input id="curDirId" name="curDirId" type="hidden" th:value="${root.id}">
            <input type="hidden" value="" name="currentPath" id="currentPath"/>
            <div id="c_body" class="c_body scro2" style="background: #DFE7EF;">
                <div class="dir" th:each="dir,stat:${cliDir}">
                    <div class="dir_img" th:id="${dir.id}"
                         th:attr="data-name=${dir.dirName},create-date=${dir.createTime},create-by=${dir.createBy}">
                    </div>
                    <div class="name">
                        <span style="display:block;text-align: center;">[[${dir.dirName}]]</span>
                    </div>
                </div>
                <div class="file" th:each="file,stat:${cliFiles}">
                    <div class="file_style" th:classappend="${file.type}"
                         th:attr="file-id=${file.id},data-name=${file.fileName},create-date=${file.createTime},create-by=${file.createBy},data-size=${file.fileSize}"
                         th:id="${file.id}">
                    </div>
                    <a th:href="${file.url}" style="display:none;"></a>
                    <div id="name" class="name">
                        <span style="display:block;text-align: center;">[[${file.fileName}]]</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="foot" class="foot">
            <div class="details" id="details_img" style="height: 90px;">
                <div class="mp4">
                </div>
            </div>
            <div class="info_details" style="margin-top:20px;font-size: 16px;font-weight: bold;">
                <div class="" style="display: block;height: 20px;line-height: 20px;">
                    文件名:&nbsp;<span id="fileName"></span>
                </div>
                <div class="" style="display: block;height: 20px;line-height: 20px;">
                    大小:&nbsp;<span id="fileSize"></span>
                </div>
                <div class="" style="display: block;height: 20px;line-height: 20px;">
                    文件类型:&nbsp;<span id="fileType"></span>
                </div>
                <div class="" style="display: block;height: 20px;line-height: 20px;">
                    上传者:&nbsp;<span id="createBy"></span>
                </div>
                <div class="" style="display: block">
                    上传时间:&nbsp;<span id="createDate"></span>
                </div>
            </div>
        </div>
    </div>
    <!--body的右击菜单-->
    <ul class="contextmenu">

        <li><a href="#" onclick="addDir()">新建文件夹</a></li>

        <li><a href="#" onclick="refresh()">刷新</a></li>

        <li><a href="#" onclick="upload()">上传</a></li>

        <li><a href="#">属性</a></li>

    </ul>
    <!--文件右击菜单-->
    <ul class="file_menu">

        <li><a href="#" id="downFile">下载</a></li>

        <li><a href="#" id="deleteFileBtn" shiro:hasPermission="dir:delete">删除</a></li>

        <li><a href="#" id="reFileName" shiro:hasPermission="dir:reName">重命名</a></li>

        <li><a href="#">属性</a></li>

    </ul>
    <!--文件夹右击菜单-->
    <ul class="dir_menu">

        <li><a href="#" onclick="openDir()">打开</a></li>

        <li id="deleteDirBtn"><a href="#">删除</a></li>

        <li><a href="#" id="reDirName">重命名</a></li>

        <li><a href="#">打包下载</a></li>

        <li><a href="#">属性</a></li>

    </ul>
    <div id="upload_div" class="dialog" style="display: none;">

        <div id="dialog_head" class="dialog_head"></div>
        <div id="dialog_body" class="dialog_body">
            <div id="addBtn" class="addFile">
                <!-- <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" style="display: none;"/> -->
                <!-- <div id="progressNumber"></div> -->
            </div>
            <input type="file" name="fileToUpload" id="files" style="display: none;"/>
            <input type="button" onclick="uploadFile()" value="Upload" style="display: none;"/>
        </div>
        <div id="dialog_foot" class="dialog_foot btn">
            <input type="button" value="上传" id="submit_btn"/>
        </div>
    </div>
    <div id="addDir" class="addDir">
        <div id="addDir_head" class="addDir_head"><h5 style="text-align:center;font-size:16px;padding-top:4px;">
            新建文件夹</h5></div>
        <div id="addDir_body" class="addDir_body">
            <input type="text" class="" name="newDirName" id="newDirName" placeholder="请输入新建文件夹的名字"/>
        </div>
        <div id="addDir_foot" class="addDir_foot">
            <div id="addDir_foot_l" class="addDir_foot_l">
                确认
            </div>
            <div id="addDir_foot_r" class="addDir_foot_r">
                取消
            </div>
        </div>
    </div>
</div>
</body>
<script th:replace="systemCommon/HarinCommon :: commonJs"></script>
<script type="text/javascript" th:inline="javascript">
    var idArray = [];
    var goId;
    $(document).ready(function () {
        idArray[0] = "1";
        /*下载按钮*/
        $("#downFile").on("click", function () {
            $(".dir_file_active").children("a")[0].click();
            close();
        });
        /*删除文件*/
        $("#deleteFileBtn").on("click", function () {

            deleteDirOrFile();

        });

        /*删除文件夹*/
        $("#deleteDirBtn").on("click", function () {
            deleteDirOrFile();
        });
        /*重命名*/
        $("#reFileName").on("click", function () {
            var input = "<input id=\"reName\" type=\"text\" style=\"width:100%;background-color:#118DEF;outline:none;border:0;text-align: center\" onkeydown='dirKeyDown(this,event)'/>";
            var input_jq = $(input);
            $(".dir_file_active").children(".name").children("span").css("display", "none");
            $(".dir_file_active").children(".name").append(input_jq);
            input_jq.focus();
            close();
            //
        });
        $("#reDirName").on("click", function () {
            var input = "<input id=\"reName\" type=\"text\" style=\"width:100%;background-color:#118DEF;outline:none;border:0;text-align: center\" onkeydown='dirKeyDown(this,event)'/>";
            var input_jq = $(input);
            $(".dir_file_active").children(".name").children("span").css("display", "none");
            $(".dir_file_active").children(".name").append(input_jq);
            input_jq.focus();
            close();
            //
        });


        /*按下返回键*/
        $("#back").on("click", function () {
            if (idArray.length == 1) {
                refCbody(1);
            } else {
                goId = idArray[idArray.length - 1];
                var backId = idArray.length - 2;
                refCbody(idArray[backId]);
            }
            close();
        });
        /*按下前进键*/
        $("#go").on("click", function () {
            refCbody(goId);
            close();
        });
        /*按下home键*/
        $("#home").on("click", function () {
            refCbody(1);
            close();
        });
        $("#c_body").on("click", function () {
            close();
            $(".dir_file_active").removeClass("dir_file_active");
        });
        /*文件或者文件夹的单击事件*/
        $(".dir,.file").on("click", function () {
            dirOrFileClick(this);
            event.stopPropagation();
        });

        $("#close_icon").on("click", function () {
            close();
        });
        $("#c_body .dir").on('dblclick', function () {
            dirdblclick(this);
        });
    });

    //弹出新建文件夹框
    function addDir() {
        showAddDir();
    }

    /*刷新*/
    function refresh() {
        var id = $("#curDirId").val();
        //console.log("刷新"+id);
        refCbody(id);
        close();
    }

    //弹出上传框
    function upload() {

        $("body").css('overflow-y', 'hidden');
        $("#upload_div").removeAttr("style");
        $("#mengban").css("display", "block");
        $(".contextmenu").hide();
    }

    function dirKeyDown(t, event) {
        console.log(event.keyCode);
        if (event.keyCode == 13) {
            console.log("按下了回车键");
            reName(t);
        }
    }

    //重命名
    function reName(t) {
        //如果是文件夹
        if ($(".dir_file_active").hasClass("dir")) {
            var id = $(".dir_file_active").children(".dir_img").attr("id");
            var newName = $(t).val();
            console.log(newName);
            $.ajax({
                url: "/directory/reName",
                type: "post",
                data: {
                    "id": id,
                    "newName": newName
                },
                success: function (data) {
                    if (data.code == 200) {
                        console.log(data.message);
                        refresh();
                    }
                }
            });
        }
    }

    //属性
    function setting() {

    }

    /*打开文件夹*/
    function openDir() {
        var actDir = $(".dir_file_active");
        var id = actDir.children(".dir_img").attr("id");
        //console.log("打开了"+id+"文件夹");
        refCbody(id);
        close();
    }

    /*删除*/
    function deleteDirOrFile() {
        var t = $(".dir_file_active");
        var url = serverUri;
        var id;
        if (t.hasClass("dir")) {
            url = url + "/directory/deleteDir";
            id = {"dirId": t.children(".dir_img").attr("id")};
        } else if (t.hasClass("file")) {
            url = url + "/assets/fileDelete";
            id = {"fileId": t.children(".file_style").attr("file-id")}
        }
        $.ajax({
            url: url,
            type: "POST",
            data: id,
            dataType: "JSON",
            success: function (data) {
                if (data.code == 200) {
                    //console.log(data.message);
                    //删除成功的话，刷新当前页面
                    refCbody($("#curDirId").val());
                }
            }
        });
        close();
    }


    function dirdblclick(t) {
        refCbody($(t).children(".dir_img").attr("id"));
        close();
    }

    //刷新当前的文件夹、文件显示内容区域
    function refCbody(id) {
        close();
        /**保存文件夹id**/
        var idLength = idArray.length;
        var idIndex = $.inArray(id + "", idArray);
        if (idIndex >= 0) {
            idArray = idArray.slice(0, idIndex + 1);
        } else {
            idArray[idLength] = id + "";
        }
        //console.log("id所在的位置:"+idIndex);
        //console.log("id的数组内容:"+idArray);
        /*保存文件夹id到本地数组中*/
        $.ajax({
            url: "/directory/getDir",
            type: "POST",
            dataType: "json",
            data: {"dirId": id},
            success: function (data) {
                //当前文件夹
                var dir = data.result.dir;
                //当前文件夹下的子文件夹
                var cliDirs = data.result.cliDirs;
                //当前文件夹下的文件
                var cliFiles = data.result.cliFiles;
                //1.先更改当前的文件夹ID
                $("#curDirId").val(dir.id);
                //清除原先展示的内容
                $("#c_body").html("");
                var dirdblclick = "dirdblclick(this)";
                /*处理全路径*/
                var pathLi = $("#head_r ul").html("<li class=\"path_logo\" ></li>\n" +
                    "                <li class=\"path_one\" style=\"width: auto;\">\n" +
                    "                    <a href=\"#\" onclick='close();refCbody(\"1\"); '>根目录</a>\n" +
                    "                </li>");
                //获取全路径，除去第一个 “/”
                //console.log("当前全路径是:"+ dir.path);
                var path_str = dir.path.substring(1, dir.path.length);
                //判断去除“/”后是否为空字符串
                if (!isEmpty(path_str)) {
                    var pathStrArr = path_str.split("/");
                    //console.log(pathStrArr);
                    //console.log(pathStrArr.length);
                    if (pathStrArr.length > 0) {
                        $.each(pathStrArr, function (index, path) {
                            //console.log(path);
                            var pathli = "<li class=\"path_one\" style=\"width: auto;\">\n" +
                                "                    <a href=\"#\" onclick='close();refCbody(" + idArray[index + 1] + ");'>" + path + "</a>\n" +
                                "                </li>";
                            $("#head_r ul").append(pathli);
                        });
                    }
                }

                /*遍历所有的文件夹并在页面展示*/
                $.each(cliDirs, function (index, item) {
                    var div = $("<div></div>");
                    div.addClass("dir");
                    div.attr("ondblclick", "dirdblclick(this)");
                    div.attr("onclick", "dirOrFileClick(this)");
                    var div_icon = $("<div></div>");
                    div_icon.addClass("dir_img");
                    div_icon.attr("id", item.id);
                    div_icon.attr("data-name", item.dirName);
                    div_icon.attr("create-date", item.createTime);
                    div_icon.attr("create-by", item.createBy);
                    div_icon.attr("data-type", "文件夹");
                    div_icon.attr("data-size", "0");
                    var div_name = $("<div></div>");
                    div_name.addClass("name");
                    var span_name = $("<span></span>");
                    span_name.attr("style", "display:block;text-align: center;");
                    span_name.html(item.dirName);
                    div_name.append(span_name);
                    div.append(div_icon);
                    div.append(div_name);
                    /*          var dir = "<div class=\"dir\"  ondblclick=\"dirdblclick(this)\">\n" +
                                  "                <div class=\"dir_img\" id=\""+item.id+"\">\n" +
                                  "                </div>\n" +
                                  "                <div class=\"name\">\n" +
                                  "                    <span style=\"display:block;text-align: center;\">"+item.dirName+"</span>\n" +
                                  "                </div>\n" +
                                  "            </div>";*/
                    $("#c_body").append(div);

                });
                /*遍历所有的文件，并在页面展示*/

                $.each(cliFiles, function (index, file) {
                    var a = "file-id=" + "\"" + file.id + "\"" + "data-name=\"" + file.fileName + "\" create-date=\"" + file.createTime + "\" create-by=\"" + file.createBy + "\" data-size=\"" + file.fileSize + "\"";
                    var file_note = "<div class=\"file\" onclick=\"dirOrFileClick(this)\">\n" +
                        "                <div class=\"file_style " + file.type + "\"" + a + ">\n" +
                        "                </div>\n" +
                        "                <a href=\"" + file.url + "\" style=\"display:none;\"></a>\n" +
                        "                <div id=\"name\" class=\"name\">\n" +
                        "                    <span style=\"display:block;text-align: center;\">" + file.fileName + "</span>\n" +
                        "                </div>\n" +
                        "            </div>";
                    $("#c_body").append(file_note);

                });
            }

        });
    }

    //文件夹和文件的单击事件
    function dirOrFileClick(t) {
        // console.log("点击了文件或文件夹");
        //移除当时被激活的图标
        var actives = $(".dir_file_active");
        actives.each(function (index, item) {
            $(item).removeClass("dir_file_active");
        });
        //激活当前点击的图标
        $(t).addClass("dir_file_active");
        var dec;
        if ($(t).hasClass("file")) {
            dec = $(t).children(".file_style");
        } else if ($(t).hasClass("dir")) {
            dec = $(t).children(".dir_img");
        }
        $("#fileName").text(isEmpty(dec.attr("data-name")) ? "" : dec.attr("data-name"));
        $("#fileSize").text(getFileSize(parseInt(isEmpty(dec.attr("data-size")) ? "0" : dec.attr("data-size"))));
        $("#fileType").text(isEmpty(dec.attr("data-name")) ? "" : dec.attr("data-name"));
        $("#createBy").text(isEmpty(dec.attr("create-by")) ? "" : dec.attr("create-by"));
        //console.log(dec.attr("create-date"));
        $("#createDate").text(isEmpty(dec.attr("create-date")) ? "" : new Date(dec.attr("create-date").replace(/-/, "/")).Format("yyyy年MM月dd日 HH时mm分ss秒"));
        //下面列表获取详细信息展示
        $("#details_img div").removeClass();
        $("#details_img div").addClass($(t).children("div:eq(0)").attr("class"));
        event.stopPropagation();
        close();
    }

    //计算文件大小
    function getFileSize(fileByte) {
        var fileSizeByte = fileByte;
        var fileSizeMsg = "";
        if (fileSizeByte < 1048576) fileSizeMsg = (fileSizeByte / 1024).toFixed(2) + "KB";
        else if (fileSizeByte == 1048576) fileSizeMsg = "1MB";
        else if (fileSizeByte > 1048576 && fileSizeByte < 1073741824) fileSizeMsg = (fileSizeByte / (1024 * 1024)).toFixed(2) + "MB";
        else if (fileSizeByte > 1048576 && fileSizeByte == 1073741824) fileSizeMsg = "1GB";
        else if (fileSizeByte > 1073741824 && fileSizeByte < 1099511627776) fileSizeMsg = (fileSizeByte / (1024 * 1024 * 1024)).toFixed(2) + "GB";
        else fileSizeMsg = "文件超过1TB";
        return fileSizeMsg;
    }

    //关闭所有的弹出框
    function close() {

        //console.log("移除所有的框框");
        $("#upload_div").attr("style", 'display:none;');
        $("#mengban").css("display", "none");
        $("body").css('overflow-y', 'auto');
        $("#addDir").hide();
        $("#mengban").hide();
        $(".dir_menu").hide();
        $(".file_menu").hide();
        $(".contextmenu").hide();
        return true;
    }

    /**
     * 监听键盘事件
     */
    $(document).keydown(function (event) {
        var key = event.which || event.keyCode;
        ;
        if (key == 27) {
            /* /!*隐藏上传弹出框*!/
             $("#upload_div").fadeOut("slow");
             $("#mengban").fadeOut("slow");
             $("#addDir").fadeOut("slow");
             $(".contextmenu").fadeOut("slow");
             $(".dir_menu").fadeOut("slow");
             $(".file_menu").fadeOut("slow");
             $("body").css('overflow-y','auto');*/
            close();
        }
    });

    //应该写在全局里
    function isEmpty(obj) {
        if (typeof obj == "undefined" || obj == null || obj == "" || obj == "null") {
            return true;
        } else {
            return false;
        }
    }


</script>
<script th:if="${#strings.isEmpty(isIndex)}" type="text/javascript" th:src="@{/assets/js/file/rightMenu2.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/file/fileUpload.js}"></script>
</html>
